<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <h1>The Ajax 02 Page</h1>
        <fieldset>
            <legend>Ajax 表单请求</legend>
            <form>
                <input type="text" name="name" value="" onblur="doCheck()"/>
                <button type="button" onclick="doSave()">Save</button>
            </form>
            <span id="result"></span>
        </fieldset>
    </div>
</body>
<script>
    function doAjaxGet(url,params,callback){
    //1.创建xhr对象
    let xhr = new XMLHttpRequest();
    //2.设置状态监听(不是必须的，但是加入要向获取服务端响应的结果并进行处理就要进行状态监听)
    xhr.onreadystatechange=function (){
        if (xhr.readyState==4&&xhr.status==200){
            callback(xhr.responseText);//处理响应数据
        }
    }
    //3.建立Get连接(GET请求传参数，要将参数拼接到url中)
    xhr.open("GET",url,true);
    //4.发送异步POST请求(参数需要写到send方法内部)-表单数据或数据量比较大时
    xhr.send(null);//通过模板字符串``和${}表示拼接url
}

    function doSave(){
        //1.定义请求url
        let url = "http://localhost/doSave";
        //2.定义请求参数
        let name = document.forms[0].name.value;
        let params = `name=${name}`;
        //3.发送异步请求并处理响应结果
        doAjaxPost(url,params,function (result){
            document.getElementById("result").innerHTML=result;
        })
    }

    function doAjaxPost(url,params,callback){//封装共性（不变的），提取特性（可能会经常变化的）
        //1.创建xhr对象
        let xhr = new XMLHttpRequest();
        //2.设置状态监听
        xhr.onreadystatechange=function (){
            if (xhr.readyState==4&&xhr.status==200){
                callback(xhr.responseText);//
            }
        }
        //3.建立Get连接(GET请求传参数，要将参数拼接到url中)
        xhr.open("POST",url,true);
        //post请求假如需要向服务器传递参数，则必须在open之后设置请求头
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//传参必须设置请求头
        //4.发送异步POST请求(参数需要写到send方法内部)-表单数据或数据量比较大时
        xhr.send(params);//通过模板字符串``和${}表示拼接url
    }

    function doCheck(){//发送异步请求，检查name是否存在
        //1.定义请求url
        let url = "http://localhost/doCheck";//通过模板字符串``和${}表示拼接url
        //2.定义请求参数
        let name = document.forms[0].name.value;//获取表单中name对应的value属性值
        //3.
    }
</script>
</html>